<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css"> div#grid_container {
        width: 900px;
        margin: 0px auto;
        height: 860px;
        border: #999 1px dashed;
    }

    div#grid_container > div {
        position: absolute;
        width: 291px;
        border: #000 1px solid;
    }

    div#grid_container > div:nth-child(2n+0) {
        background: #FFDC64;
    }

    div#grid_container > div:nth-child(2n+1) {
        background: #FEC910;
    }

    div#grid_container > div > div {
        padding: 20px;
        font-size: 27px;
        color: #D9A800;
    } </style>
    <script> function renderGrid() {
        var blocks = document.getElementById("grid_container").children;
        var pad = 10, cols = 3, newleft, newtop;
        for (var i = 1; i < blocks.length; i++) {
            if (i % cols == 0) {
                newtop = (blocks[i - cols].offsetTop + blocks[i - cols].offsetHeight) + pad;
                blocks[i].style.top = newtop + "px";
            } else {
                if (blocks[i - cols]) {
                    newtop = (blocks[i - cols].offsetTop + blocks[i - cols].offsetHeight) + pad;
                    blocks[i].style.top = newtop + "px";
                }
                newleft = (blocks[i - 1].offsetLeft + blocks[i - 1].offsetWidth) + pad;
                blocks[i].style.left = newleft + "px";
            }
        }
    }
    window.addEventListener("load", renderGrid, false);
    window.addEventListener("resize", renderGrid, false); </script>
</head>
<body>
<div id="grid_container">
    <div style="height:140px;">
        <div>1</div>
    </div>
    <div style="height:200px;">
        <div>2</div>
    </div>
    <div style="height:120px;">
        <div>3</div>
    </div>
    <div style="height:180px;">
        <div>4</div>
    </div>
    <div style="height:150px;">
        <div>5</div>
    </div>
    <div style="height:160px;">
        <div>6</div>
    </div>
    <div style="height:180px;">
        <div>7</div>
    </div>
    <div style="height:170px;">
        <div>8</div>
    </div>
    <div style="height:160px;">
        <div>9</div>
    </div>
    <div style="height:180px;">
        <div>10</div>
    </div>
    <div style="height:150px;">
        <div>11</div>
    </div>
    <div style="height:160px;">
        <div>12</div>
    </div>
    <div style="height:130px;">
        <div>13</div>
    </div>
    <div style="height:140px;">
        <div>14</div>
    </div>
    <div style="height:210px;">
        <div>15</div>
    </div>
</div>
</body>
</html>